<template lang="pug">
  .clearfix
    Modal(
      v-model="isShowAddFeedbackModal"
      title="添加课程/项目评价反馈"
      width="700"
      class-name="vertical-center-modal"
      :closable="false"
    )
      .text-gray-9.text-center.pb-10 仅支持上传10M以内的xlsx文件
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="185")
        FormItem.form-item.ivu-col.form-item-has-unit(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            span.item-span-unit(v-if="item.unit") {{item.unit}}
            Input(v-model="formData[item.model]" :placeholder="item.placeholder")
          template(v-if="item.type === 'upload'")
            Row
              Col(span="5")
                span.item-span-unit(v-if="item.unit") {{item.unit}}
                Input(v-model="formData[item.model]")
              Col.pl-10(span="6")
                Upload(
                  ref="upload"
                  v-model="formData[item.file]"
                  :max-size="10 * 1024"
                  :on-exceeded-size="handleMaxSizeTen"
                  :before-upload="handleBeforeUpload"
                  :on-success="uploadSuccess"
                  accept=".xls, .xlsx"
                  :action="'/api/ProductDelivery/AddFeedback?productDeliveryID=' + productDeliveryID"
                  :show-upload-list="false"
                  :data="formData"
                )
                  Input(v-model="formData[item.file].name" v-show="false")
                  Button(type="info" @click="currentModel = item.file" :disabled="!formData[item.model]") 附件上传
              Col(span="13")
                Tag(v-if="formData[item.file]") {{formData[item.file].name}}

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import Cookies from 'js-cookie'
import { PolicySupportApi } from '@/api/PolicySupport.api.js'

export default {
  name: '',

  props: {
  },

  components: {
  },

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      productDeliveryID: null,
      isShowAddFeedbackModal: false,
      isPreviewImgModal: false,
      currentPreviewImg: null,
      formData: {
        customerFeedback: '',
        customerFeedbackFile: '',
        teacherFeedback: '',
        teacherFeedbackFile: '',
        salerFeedback: '',
        salerFeedbackFile: '',
        pmFeedback: '',
        pmFeedbackFile: '',
        studentFeedback: '',
        studentFeedbackFile: '',
        score: ''
      },
      formItem: [
        { type: 'upload', label: '客户评价：', placeholder: '请上传客户评价', prop: 'customerFeedbackFile', model: 'customerFeedback', file: 'customerFeedbackFile', style: 'ivu-col-span-24', unit: '分' },
        { type: 'upload', label: '讲师评价：', placeholder: '请上传讲师评价', prop: 'teacherFeedbackFile', model: 'teacherFeedback', file: 'teacherFeedbackFile', style: 'ivu-col-span-24', unit: '分' },
        { type: 'upload', label: '销售评价：', placeholder: '请上传销售评价', prop: 'salerFeedbackFile', model: 'salerFeedback', file: 'salerFeedbackFile', style: 'ivu-col-span-24', unit: '分' },
        { type: 'upload', label: '交互项目经理/助理评价：', placeholder: '请上传交互项目经理/助理评价', prop: 'pmFeedbackFile', model: 'pmFeedback', file: 'pmFeedbackFile', style: 'ivu-col-span-24', unit: '分' },
        { type: 'upload', label: '学员评价：', placeholder: '请上传学员评价', prop: 'studentFeedbackFile', model: 'studentFeedback', file: 'studentFeedbackFile', style: 'ivu-col-span-24', unit: '分' },
        { type: 'input', label: '综合得分：', placeholder: '请输入综合得分', prop: 'score', model: 'score', style: 'ivu-col-span-24', unit: '分' }
      ],
      mergeFormData: {},
      rules: {
        customerFeedbackFile: [
          { required: true, message: '请输入客户评价及上传附件' }
        ],
        teacherFeedbackFile: [
          { required: true, message: '请输入讲师评价及上传附件' }
        ],
        salerFeedbackFile: [
          { required: true, message: '请输入销售评价及上传附件' }
        ],
        pmFeedbackFile: [
          { required: true, message: '请输入交互项目经理/助理评价及上传附件' }
        ],
        studentFeedbackFile: [
          { required: true, message: '请输入学员评价及上传附件' }
        ],
        score: [
          { required: true, message: '请输入综合得分' }
        ]
      },
      arrListDown: {
        tempOps: []
      },
      fileArr: [
        { name: 'customerFeedback', file: null },
        { name: 'teacherFeedback', file: null },
        { name: 'salerFeedback', file: null },
        { name: 'pmFeedback', file: null },
        { name: 'studentFeedback', file: null }
      ],
      errorData: {
        errorId: '',
        isError: false,
        downLoadUrl: null
      },
      currentModel: null
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowAddFeedbackModal = false
    },

    show () {
      this.isShowAddFeedbackModal = true
      this.fileArr.map(item => {
        item.file = null
      })
      this.$refs.formData.resetFields()
    },

    // 上传前
    handleBeforeUpload (file) {
      this.formData[this.currentModel] = file
      return false
    },

    // 上传成功
    uploadSuccess (res, row) {
      console.log('上传成功res: ', res)
      if (res.code === 200 && res.success) {
        this.$Message.success(res.message)
        this.isShowAddFeedbackModal = false
      } else {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
      }
      this.$emit('query')
    },

    // 提交表单
    handleSubmit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.$refs.upload[0].post(this.formData)
        } else {
          this.$Message.warning('请输入必填项')
        }
      })
    },

    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    }
  }
}
</script>

<style lang="scss">
</style>
